<template>
	<view class="container">
		<view class="NavBarBox">
			<view class="navbar">
				<view class="navItem" :class="current == 1 ? 'active':''" @click="checkItem(1)">事故</view>
				<view class="navItem" :class="current == 0 ? 'active':''" @click="checkItem(0)">维保</view>
			</view>
			<view class="Num" @click="checkShow">联系客服</view>
		</view>
		<view class="List">
			<frequencyItem v-for="(item,index) in checkList" :key="index" :OBJ="item"></frequencyItem>
		</view>
		<u-popup :show="show" mode="center" :round="24" >
			<view class="popupBox">
				<view class="TITLE">联系客服</view>
				<view class="BODY">
					<image :src="baseUrl + qrcode" mode="" class="qrcode"></image>
					<view class="Tips">长按识别二维码 · 添加客服解决问题</view>
					<view class="BTN" @click="checkShow">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { OrderRecord, getQrCode } from '../../API/api';
import env from '@/utils/env.js'
	export default {
		data() {
			return {
				current:1,
				List:[],
				show:false,
				qrcode:'',
				baseUrl:env.baseUrl
			};
		},
		onLoad() {
			this.getList()
			this.GETCODE()
		},
		computed:{
			checkList(){
				return this.List.filter(item => item.reportType == this.current)
			}
		}, 
		methods:{
			checkShow(){
				this.show = !this.show
			},
			getList(){
				OrderRecord().then(res=>{
					this.List = res.data
				}).catch(err=>{})
			},
			checkItem(value){
				this.current = value
			},
			GETCODE(){
				getQrCode().then(res=>{
					this.qrcode = res.data.img
				}).catch(err=>{})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		min-height: 100vh;
		.NavBarBox{
			display: flex;
			align-items: center;
			padding: 18rpx 30rpx;
			background-color: #fff;
			justify-content: space-between;
			.navbar{
				display: flex;
				align-items: center;
				background-color: #fff;
				.navItem{
					width: 128rpx;
					height: 52rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
					text-align: center;
					line-height: 52rpx;
					margin-right: 30rpx;
					background-color: #FFFFFF;
					border-radius: 26rpx 26rpx 26rpx 26rpx;
				}
				.active{
					color: #FFFFFF !important;
					background-color: #00A3E6 !important;
				}
			}
			.Num{
				font-weight: 400;
				font-size: 28rpx;
				color: #00A3E6;
			}
		}
		.List{
			padding: 36rpx;
		}
		.popupBox{
			width: 670rpx;
			border-radius: 24rpx;
			.TITLE{
				padding: 30rpx 0;
				text-align: center;
				font-weight: bold;
				font-size: 40rpx;
				color: #101010;
				border-bottom: 1rpx solid #eee;
				border-radius: 24rpx 24rpx 0 0;
			}
			.BODY{
				padding: 84rpx 0;
				
				.qrcode{
					width: 252rpx;
					height: 252rpx;
					display: block;
					border-radius: 16rpx;
					margin-bottom: 48rpx;
				}
				
				.Tips{
					color: #707070;
					font-weight: 400;
					font-size: 32rpx;
					text-align: center;
					margin-bottom: 48rpx;
				}
				
				.BTN{
					width: 362rpx;
					height: 84rpx;
					color: #FFFFFF;
					margin: 0 auto;
					font-weight: 400;
					font-size: 32rpx;
					text-align: center;
					line-height: 84rpx;
					border-radius: 42rpx;
					background-color: #00A3E6;
				}
			}
		}
	}
</style>
